<template>
  <div class="ylbd-container">
    <div class="floor">
      <!-- 左侧一级科室 -->
      <div class="floor-left">
        <div
          v-for="(item, idx) in ypList"
          :key="item.id"
          :class="['first-item', { active: item.sid === activeFirst }]"
          @click="selectFirst(item.sid)"
        >
          <span v-if="item.sid === activeFirst" class="first-bar"></span>
          <span class="first-label">{{ item.subject }}</span>
        </div>
      </div>
      <!-- 右侧二级科室 -->
      <div class="floor-right">
        <div v-for="item in secondList" :key="item.id" class="second-item">
          {{ item.Disease }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getYpListData, getJbListData } from '@/https/HomeHTTP'
import { onLoad } from '@dcloudio/uni-app'

const ypList = ref([])
const getYpList = async () => {
  const res = await getYpListData()
  ypList.value = res.data
}
const secondList = ref([])
const getJbList = async (fid: number) => {
  const res = await getJbListData(fid)
  secondList.value = res.data
}

onLoad(async () => {
  await Promise.all([getYpList(),getJbList(activeFirst.value)])
})

const activeFirst = ref(30)

function selectFirst(idx: number) {
  activeFirst.value = idx
  getJbList(idx)
}
</script>

<style lang="scss" scoped>
.ylbd-container {
  background: #fff;
  min-height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  padding: 0;
}
.floor {
  display: flex;
  width: 100%;
  height: 100vh;
}
.floor-left {
  height: 100dvh;
  width: 30vw;
  min-width: 120px;
  max-width: 300px;
  overflow-y: auto;
  padding: 12px 0;
  background: #fff;
  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.floor-left::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Webkit */
}
.first-item {
  margin-bottom: 24px;
  padding: 8px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.first-item:last-child {
  margin-bottom: 0;
}
.first-item.active {
  background: #f7f8fa;
  color: #222;
  font-weight: bold;
  font-size: 20px;
}
.first-bar {
  width: 6px;
  height: 24px;
  background: #00d200;
  border-radius: 3px;
  margin-right: 10px;
  display: inline-block;
}
.first-label {
  // font-style: italic;
}
.floor-right {
  flex: 1;
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
  padding: 0 0 0 0;
}
.second-item {
  font-size: 22px;
  font-weight: bold;
  color: #222;
  height: 56px;
  display: flex;
  align-items: center;
  padding-left: 32px;
}
</style>
